<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;

    }
    html {
      font-size: 10px;
    }
    body {
      background-color: rgb(236, 217, 131);
    }
    .wrapper {
      width: 60vw;
      height: 90vh;
      border: .5rem solid rgb(185, 48, 48);
      background-color: rgb(214, 184, 164);
      padding: 1rem;

      /*居中*/
      /* position: absolute;
      left: 50%;
      transform: translateX(-50%); */
      margin: 0 auto;
    }
    header {
      margin: 0.5rem 0 1rem 0;
    }
    .line {
      width: 100%;
      background-color: rgb(184, 179, 179);
      height: 1px;
    }
    footer {
      margin: .5rem 0 0 0;
    }

    .mainnav {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: row;
      margin-top: .5rem;
    }
    .mainnav > div {
      flex: 1;
      
    }
    .mainnav > div > a {
      text-decoration: none;
      color:rgb(136, 128, 57);
    }
    .content {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      margin: .5rem 0 0 0;
    }
    .content > div {
      flex: 1;
    }
    .content
    
  </style>
</head>
<body>
  <section class="wrapper">
    <header>
      <h1>旅行杂记</h1>
      <div class="desc">要么旅行，要么读书，灵魂和身体，必须要有一个在路上</div>
      <nav>
        <div class="mainnav">
          <div class="mainnav_item"><a href="">关于背包客</a></div>
        
          <div class="mainnav_item"><a href="">国内旅行</a></div>
       
          <div class="mainnav_item"><a href="">国外旅行</a></div>
        
          <div class="mainnav_item"><a href="">联系我们</a></div>
        </div>
      </nav>
    </header>
    <div class="line"></div>
    <section class="content">
      <div>
        <h2 class="title">我们一直在旅行</h2>
        <p>旅游不在乎终点</p>
        <p>我们一直在旅行，这就是真的旅行</p>
      </div>
      <div class="image">
        <img src="./1.jpg" alt="图片丢失了">
      </div>
    </section>
    <footer>
      <p class="footercontent" style="text-align: center;">联系我们</p>
    </footer>
  </section>
</body>
</html>